let echarts = require("echarts/lib/echarts")
let elementResizeDetectorMaker = require("element-resize-detector")

export default {
  pieEchart: function(data) {
    let option = {
      title: {
        show: false,
        text: "Referer of a Website",
        subtext: "Fake Data",
        left: "center"
      },
      tooltip: {
        trigger: "item"
      },
      legend: {
        orient: "vertical",
        left: "5%"
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          left: "10%",
          data: data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    }
    var chartDom = document.getElementById("chart-pie")
    var myChart = echarts.init(chartDom)
    myChart.setOption(option)
    window.addEventListener("resize", () => {
      myChart.resize()
    })
    let erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById("chart-pie"), function(element) {
      myChart.resize()
    })
    return myChart
  },
  columnarEchart: function(data) {
    let name = data.name
    let value = data.valueData.map(item => {
      item.type = "bar"
      // item.data = item.val
      // item.markPoint = {
      //     data: [
      //         { type: 'max', name: 'Max' },
      //         { type: 'min', name: 'Min' }
      //     ]
      // }
      // item.markLine = {
      //     data: [{ type: 'average', name: 'Avg' }]
      // }
      return item
    })
    let option = {
      title: {
        show: false,
        text: "Rainfall vs Evaporation",
        subtext: "Fake Data"
      },
      tooltip: {
        trigger: "axis"
      },
      legend: {},
      grid: {
        left: "3%",
        right: "8%",
        bottom: "3%",
        containLabel: true
      },
      toolbox: {
        show: false,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar"] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: "category",
          data: data.xData
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: value
    }
    var chartDom = document.getElementById(name)
    var myChart = echarts.init(chartDom)
    myChart.setOption(option)
    window.addEventListener("resize", () => {
      myChart.resize()
    })
    let erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById(name), function(element) {
      myChart.resize()
    })
    return myChart
  },
  lineEchart: function(data) {
    console.log(data, "///***")
    let value = data.valueData.map(item => {
      item.type = "line"
      return item
    })
    let option = {
      tooltip: {
        trigger: "axis"
      },
      legend: {},
      grid: {
        left: "3%",
        right: "3%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: data.xData
      },
      yAxis: {
        type: "value"
      },
      series: value
    }
    var chartDom = document.getElementById("line-one")
    var myChart = echarts.init(chartDom)
    myChart.setOption(option)
    window.addEventListener("resize", () => {
      myChart.resize()
    })
    let erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById("line-one"), function(element) {
      myChart.resize()
    })
    return myChart
  }
}
